<template>
<div class="app-container bg-white">
    <div class="page-body">
  <!-- <div class="padding_15"> -->
    <el-form :model="classForm" label-width="150px" :disabled="disabled">
      <el-form-item v-for="(item, index) in classForm.nodeList" :key="index" :label="item.name + ':'" >
        <span class="input_item" >{{item.nodes[0].name}}</span><br/>
        <template>
            <el-button @click="addAuditPeople(index,item.nodes[0])">添加审核人员</el-button>
            <el-tag
            v-for="tag in classForm.tags[index]"
            :key="tag.id"
            closable
            @close="handleCloseFincial(tag)">
            {{tag.userName}}
            </el-tag>
        </template>
      </el-form-item>
    </el-form>
    <el-dialog title="审核人列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="isShowDialog">
      <el-row :gutter="10">
        <el-col :span="13">
          <el-table v-loading="loading" :data="pageData" row-key="id" ref="multipleTableRef" :header-cell-style="tableHeaderStyle" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="55" :reserve-selection="true" prop="index"></el-table-column>
            <!-- <el-table-column type="index" label="序号"></el-table-column> -->
            <el-table-column property="name" label="姓名"></el-table-column>
            <el-table-column property="username" label="账号"></el-table-column>
          </el-table>
          <br />
          <el-pagination class="text-center" background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="closeAttrDialog()" >确 定</el-button> 
      </div>
    </el-dialog>
    <!-- 税率税码列表 -->
    <!-- <rate-list :visible.sync="isShowRateDialog" :selectedList="rateList" @selected="getSelectProperty"></rate-list> -->
  </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import Setting from '@/settings'
// import AppUploader from '@/components/AppUploader/index';
// import RateList from '@/views/store-management/components/rateList';
import { GetAuditPeopleList, GetAuditPointList, GetAuditPointPeopleList, AddAuditPeople, RemoveAuditPeople } from '@/views/config-center/services/index'

export default {
//   components: {
//     AppUploader,
//     RateList
//   },
//   props: {
//     mode: false,
//     classList: null,
//   },
  computed: {
    ...mapGetters(['roleBtns']),
  },
  data() {
    return {
      classForm: {
         tags: {},
         nodeList: [],
      },
      fincialTags: [],
      supplyTags: [],
      finailForm: {
        classId: '',
        rateList: []
      },
      // rateList: [],
      isShowDialog: false,
      isShowRateDialog: false,
      loading: false,
      pageIndex: 1,
      pageData: [],
      pageCount: 0,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageRateCount: 0,
      pageRateIndex: 1,
      pageRateSize: Setting.defaultTablePaginationSize,
      pageRateSizes: Setting.tablePaginationSizes,
      tableRateHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      multipleSelection: [],
      checkedList: [null, null, null, null], //已选中的行
      isShowParentNode: true,
      disabled: false,
      fincialdisabled: false,
      
      length: 0,
      attributeForm: [
        {
          sort: '1',
          propertyName: '',
          propertyId: '',
        },
        {
          sort: '2',
          propertyName: '',
          propertyId: '',
        },
        {
          sort: '3',
          propertyName: '',
          propertyId: '',
        },
        {
          sort: '4',
          propertyName: '',
          propertyId: '',
        },
      ],
      checkRadio: 1,
      status: 3,
      queryName: '',
      fileFormat: ['jpg', 'jpeg', 'png'],
      groupName: ''
    }
  },
  mounted () {
    this.getPointList()
  },
  methods: {
     getPointList() {
       GetAuditPointList({}).then(res =>{
        if(res.code == 200) {
          this.classForm.nodeList = res.data
          if(this.classForm.nodeList.length>0) {
           for(let i = 0;i<this.classForm.nodeList.length;i++) {
            this.getPeople(i,this.classForm.nodeList[i])
           }
          }
           if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getRateList()
            }
        }
      }).catch(err => {
        console.log(err)
      })
    },
     async getPeople(index,item) {
       let res = await GetAuditPeopleList({
          groupName: item.nodes[0].groupName
        })
        if(res.code == 200) {
          this.$set(this.classForm.tags,index,res.data)
       }
    },
    getSupplyPeople(){
        GetAuditPeopleList({
          groupName: 'supplier_audit'
        }).then(data =>{
          console.log(data)
          if(data.code == 200) {
            this.supplyTags = data.data
          }
        }).catch(err => {
          console.log(err)
        })
    },

    //删除审核人
    handleCloseFincial(item) {
       console.log(item)
       RemoveAuditPeople({
         id: item.id,
         isDelete: 1
       }).then(data => {
         if(data.code == 200) {
           this.$message.success("删除成功！")
         }else {
           this.$message.error("删除失败！")
         }
         this.getPointList()
       })
    },
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      
    handleSelectionChange(selectlist) {
      let arr = selectlist
      this.multipleSelection = arr
      console.log(this.multipleSelection)
    },

    // 获取税率税码列表
    getRateList() {
      GetFinicalDataList({
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        title: this.search.title,
        taxNumber: this.search.taxNumber,
        abbreviation: this.search.abbreviation,
        keywords: this.search.keywords,
        status: this.search.status
      })
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data.list.map(item => {
              item.statusBoolean = !!item.status
              return item
            })
            this.pageCount = data.data.total

            if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getRateList()
            }
          }
          setTimeout(() => {
            // this.loading = false
          }, 300)
        })
        .catch(error => {
          // this.loading = false
        })
    },
  
    toggleRowSelection(rows, state) {
      for (let i = 0; i < rows.length; i++) {
        let row = rows[i]
        this.$refs.multipleTableRef.toggleRowSelection(row, state)
      }
    },

    handleCurrentChange(row, column, event) {
      this.checkRadio = event.target.parentNode.rowIndex + 1;
    },
    confirm() {
      this.$emit('submit')
    },
    closeFincialDialog() {
      this.$emit("submitFincial", this.rateList)
    },
    changeNode(event) {
      this.length = event.length
    },
    changeNodeLength() {
      this.length = this.classForm.parentNode.length;
    },
    // 添加审核人
    addAuditPeople(index,item) {
      this.isShowDialog = true;
      this.dialogDataSelect(index,item);
    },
    dialogDataSelect(index,item) {
      this.groupName = item.groupName
      GetAuditPointPeopleList({
        depId: item.depId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res)
        this.pageData = res.data.list
        this.pageCount = res.data.total
         this.classForm.tags[index].forEach((item, index) => {
        if (item) {
          const finder = this.pageData.find(page => page.id == item.userId)
          if (finder) {
            this.$nextTick(() => {
              this.$refs.multipleTableRef.toggleRowSelection(finder, true);
            })
          }
        }
      })
      })
      // console.log(this.classForm.tags[index])
     
    },

    closeDialog() {
      this.isShowDialog = false
      this.$refs.multipleTableRef.clearSelection()
    },
    closeAttrDialog() {
     let peopleList = this.multipleSelection.map((item, index) => {
        return item.id
      })
      AddAuditPeople({
        groupName: this.groupName,
        userId: peopleList.join(",")
      }).then(res =>{
        console.log(res)
        if(res.code == 200) {
          this.$message.success('添加成功！')
        }else {
          this.$message.error('添加失败！')
        }
        this.$refs.multipleTableRef.clearSelection()
        this.groupName = ''
        this.isShowDialog = false
        this.getPointList()
      }).catch(err =>{
        console.log(err)
      })
      
    },
    // 移除属性值
    deleteTag(index) {
      this.classForm.tags.splice(index, 1)
    },
    // 分页事件
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getStoreAttrList()
    },
    handlePagingChange(event) {
      this.pageIndex = event
      this.getStoreAttrList()
    },
    // 重置表单
    resetClassForm() {
      this.classForm = {
        parentNode: [],
        title: '',
        number: '',
        sort: '',
        imgUrl: '',
        tags: [null,null,null,null],
        level: '',
      }
      this.multipleSelection = [];
    },
    // 获取属性值数据
    getStoreAttrList() {
      this.loading = true
      GetStoreAttrListByParams({
        status: 1,
        search: this.queryName,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
        .then(data => {
          this.loading = false
          if (data.code == 200) {
            this.pageData = data.data.list
            this.pageCount = data.data.total

            // 赋值勾选的数据
            if (this.pageData && this.pageData.length) {
              this.dialogDataSelect();
            }
          }
        })
        .catch(error => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 400px;
}
.input_item {
  width: 40%;
  min-width: 320px;
}

.tags_box {
  min-height: 36px;
  height: auto;
  margin-left: -2px;
  margin-right: -2px;

  .tag_item {
    margin: 2px;
  }
}
::v-deep .el-tag {
  margin-left: 10px;
}
::v-deep .el-radio-button__inner{
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color:#DCDFE6;
}
::v-deep .el-dialog__body {
  border-top: 1px solid rgba(0,0,0,0.35);;
}
::v-deep .el-radio-button .el-radio-button__inner {
    border-radius: 4px 4px 4px 0;
}
::v-deep .el-table th > .cell:nth-child(1) .el-checkbox {
  display: none;
}
</style>
